<template>
  <el-aside
  :width="$store.state.isCollapse ? '64px':'200px'"
    style="
      min-height: 102vh;
      margin-left: -10px;
      margin-top: -10px;
      background-color: #001529;
    "
  >
    <div
      style="
        height: 60px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <img src="../assets/img/d988c6f217f13bb09dd043bd93d02f8b044837b11ee89-a1I0MZ.png" class="small" alt="" />
      <transition name="el-fade-in-linear">
        <span style="margin-left: 5px;font-size: 20px;" v-show="!$store.state.isCollapse"><i style="color:aqua"><b>pigstudy</b></i></span>
      </transition>
    </div>
    <el-menu

      :collapse="$store.state.isCollapse"
      router
      text-color="rgba(255,255,255,0.65)"
      style="border: none"
      active-text-color="#fff"
      background-color="#001529"
      :default-active="$route.path"
    >
      <el-menu-item index="/home">
        <el-icon><House /> </el-icon>
        <template #title>系统首页</template>
      </el-menu-item>
      <el-menu-item index="/info" >
        <el-icon><User /></el-icon>
        <template #title>个人信息</template>
      </el-menu-item>
      <el-sub-menu index="/3">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>信息管理</span>
        </template>
        <el-menu-item index="/user">用户信息</el-menu-item>
        <el-menu-item index="/2">用户信息</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>


<script>

export default{

  data(){
    return{
    }
  }
}

</script>

<style>
.el-menu--inline{
  background-color: #000c17;
}
.el-menu--inline .el-menu-item {
  margin-left: 13px;
  height: 50px;
  line-height: 50px; 
  background-color: #000c17;
}
.el-menu-item:hover,.el-sub-menu__title:hover{
  color: #fff !important;
}
.el-menu-item.is-active{
  background-color: #1890ff;
  border-radius: 5px;
  margin: 4px;
}
.el-menu-item{
  margin: 4px;
  height: 50px;
  line-height: 50px;
}
.el-sub-menu__title{
  margin: 4px;
  height: 50px;
  line-height: 50px;
}
.el-menu--inline .el-menu-item.is-active{
  padding-left: 48px !important;
}
.el-aside{
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.small{
  width: 50px;
  height: auto;
}
</style>